<template>
	<div>
		<button class="showButton" @click="clickModal" ref="showName" v-tooltip trigger="focus" :content="tip">
			<span v-if="showName">{{showName}}</span>
			<span v-else style="color: #888888;">{{placeholder}}</span>
		</button>
		<Modal v-model="openModal" :closeOnMask="false">
			<div class="h-category-modal">
				<header class="relative">搜索数据</header>
				<div>
					<div class="h-panel-bar">
						<Search v-width="500" v-model="keyword" @search="getData" showSearchButton :loading="loading"></Search>
					</div>
					<div class="h-panel-body">
						<Table ref="table" :loading="loading" :datas="datas" :radio="true" :selectRow="true" @rowSelect="changeSelect">
							<TableItem :width="60" prop="id" align="center" title="编号" fixed="left"></TableItem>
							<TableItem :width="150" align="center" v-for="(item,index) in tables" :key="index" :title="item.title">
								<template slot-scope="{data}">
									{{data[item.field]}}
								</template>
							</TableItem>
							<TableItem :width="(item.type == 'uploads' || item.type == 'radio' || item.type == 'checkbox') ? 100 : 150" v-for="(item,index) in forms" :key="index" align="center" :title="item.name">
								<template slot-scope="{data}">
									<TableForm v-model="data" :form="item"></TableForm>
								</template>
							</TableItem>
						</Table>
						<p></p>
						<Pagination v-if="pagination.total>0"  align="right" v-model="pagination" @change="getData(false)" />
					</div>
				</div>
				<footer>
					<button class="h-btn h-btn-primary" type="button" @click="confirm">确认</button>
					<button class="h-btn" type="button" @click="clickModal">取消</button>
				</footer>
			</div>
		</Modal>
	</div>
</template>

<script>
	import TableForm from '@/components/table-form'
export default {
	components : {
		TableForm
	},
	props: {
		url: String,
		placeholder: String,
		show: String,
		value: {
			type: Number
		},
		tables: {
			type: Array,
			default : ()=>{
				return []
			}
		},
		forms: {
			type: Array,
			default : ()=>{
				return []
			}
		}
	},
	data() {
		return {
			loading: false,
			openModal : false,
			datas : [],
			keyword : '',
			selectData : {},
			tip: '',
			showName : '',
			pagination: {
				page: 1,
				size: 10,
				total: 0
			}
		}
	},
	watch:{
		show(value){
			this.showName = value
			this.keyword = value
			this.tip = '数据发生了变化,点击选择!'
			setTimeout(()=>{this.$refs.showName.focus()},100)
		}
	},
	mounted() {
		if(this.show){
			this.showName = this.show
		}else if(this.value > 0){
			this.showDefault()
		}
	},
	methods: {
		clickModal(){
			this.openModal = !this.openModal
			this.tip = ''
			if(this.openModal){
				if(this.datas.length == 0){
					this.getData()
				}
				let time = this.datas.length == 0 ? 1000 : 100
				setTimeout(()=>{
					if(this.selectData.id > 0){
						let obj = this.datas.filter((item, index) => item.id == this.selectData.id)
						if(obj.length > 0){
							this.$refs.table.setRowSelect(obj[0])
						}
					}
				},time)
			}
		},
		changeSelect(e){
			this.selectData = e
			this.showName = ''
			if(this.tables.length > 0){
				this.tables.forEach(v=>{
					this.showName += this.selectData[v.field] + ' '
				})
			}
			if(this.forms.length > 0){
				this.forms.forEach(v=>{
					if(v.type == 'input'){
						this.showName += this.selectData.form[v.field] + ' '
					}
				})
			}
		},
		async showDefault(){
			let data = await this.$api('GET',this.url+'/'+this.value)
			this.changeSelect(data)
		},
		async getData(reload = true){
			if (reload) {
				this.pagination.page = 1
			}
			this.loading = true
			let data = await this.$api('GET',this.url,{keyword:this.keyword,page:this.pagination.page,pageSize:this.pagination.size})
			this.datas = data.data
			this.pagination.total = data.total
			this.loading = false
		},
		confirm(){
			if(this.selectData.id > 0){
				this.$emit('input',this.selectData.id)
				this.$emit('confirm',this.selectData)
			}
			this.openModal = !this.openModal
		}
	}
}
</script>

<style lang='less'>
	.showButton{
		width: 100%;
		line-height: 30px;
		height: 30px;
		font-size: 13px;
		vertical-align: top;
		background: #fff;
		border:1px solid #eeeeee;
		border-radius: 3px;
		text-align: left;
		text-indent: 10px;
	}
	.showButton:hover{
		border:1px solid @primary-color;
	}
</style>
